<template>
    <el-select
        v-scroll='loadMore' 
        v-model="currentValue"
        :disabled='item.disabled?item.disabled:false' 
        :placeholder="item.placeholder?item.placeholder:'请选择'"
        :clearable="item.clearable===false?item.clearable:true"
        :multiple='item.multiple?item.multiple:false'
        :filterable="item.filterable===false?item.filterable:true"
        :loading="item.loading?item.loading:false"
        :filter-method='item.filterMethod'
        :remote="item.remote?item.remote:false"
        :remote-method="item.remoteMethod"
        :allow-create="item.allowCreate?item.allowCreate:false"
        style="width:100%"
        @clear="clear"
        @change="selectChange"
    >
        <el-option
            v-for="itemc in bigSelectList.slice(0,this.listNum)"
            :key="itemc[item.optionsValue?item.optionsValue:'value']"
            :label="itemc[item.optionsLabel?item.optionsLabel:'label']"
            :value="itemc[item.optionsValue?item.optionsValue:'value']"
        >
        </el-option>
    </el-select>
</template>
<script>
export default {
    props:{
        value:{
            type:[String,Number],
            require:true
        },
        dateNum:{
            type:Number,//初次显示下拉数据条数
            default:20,
        },
        bigSelectList:{
            type:Array,
            default:()=>{return []}
        },
        item:{
            type:Object,
            default:()=>{return null}
        }
    },
    directives:{
        // 自定义指令的名字
        'scroll':{
            // 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
            bind (el, binding) {
                // 获取滚动页面DOM
                let SCROLL_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
                SCROLL_DOM.addEventListener('scroll', function () {
                    let end = this.scrollHeight - this.scrollTop<= this.clientHeight;//滚动条是否滚到到底部
                    if(end){
                        //继续加载
                        binding.value()
                    }
                })
            }
        }
    },
    data(){
        return{
            currentValue:'',
            listNum:0,//用于接受传入的dataNum值
            optionsList:[],
        }
    },
    // watch:{
    //     value(newVal){
    //         this.value=newVal
    //     },
    //     currentValue(newVal,oldVal){
    //         if(newVal !== oldVal){
    //             this.$emit("input",this.currentValue)
    //         }
    //     }
    // },
    mounted(){
        this.listNum=this.dateNum || 20;

    },
    methods:{
        loadMore(){
            this.listNum=this.listNum+20
        },
        //改变下拉选项
        selectChange(val){
            this.$emit("selectChange",val)
        },
        //鼠标聚焦
        focusHandle(){
            this.$emit('focusHandle');
        },
        //清除
        clear(){
            this.$emit("clear")
        },
    }
}
</script>